<template>
	<view class="box bg-f7">
		<view class="index-bg z-0">
			<image :src="BASE_URL+'/uploads/20250801/bd56917fae5136700ade0f4264c3f2ef.png'" mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title=" " bgColor="transparent"
				@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
			<view class="">
				<view class="" style="height: 360rpx;"></view>
				<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelAlign='left'
					:labelWidth='100'>
					<view class="title color-80 fs-30 padding-l-r-30">
						联系人信息
					</view>
					<view class="bg-white padding-l-r-30">
						<u-form-item label="姓名" prop="name" borderBottom ref="item" :required='true'>
							<u--input v-model="model.name" border="none" inputAlign='right'
								placeholder='请输入姓名'></u--input>
						</u-form-item>
						<u-form-item label="身份证号" prop="card" borderBottom ref="item" :required='true'>
							<u--input v-model="model.card" border="none" placeholder='请输入身份证号'
								inputAlign='right'></u--input>
						</u-form-item>
						<u-form-item label="手机号" prop="mobile" borderBottom ref="item" :required='true'>
							<u--input v-model="model.mobile" border="none" placeholder='请输入手机号'
								inputAlign='right'></u--input>
						</u-form-item>
						<u-form-item label="验证码" prop="code" borderBottom ref="item" :required='true'>
							<u--input v-model="model.code" border="none" placeholder='请输入验证码'
								inputAlign='right'></u--input>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-code>
							<text @tap="getCode" class="color-43 margin-l-20">{{tips}}</text>
						</u-form-item>
						<u-form-item label="证件照片" prop="card_front" ref="item" :required='true' labelPosition='top'>
							<view class="justifyContent-spaceBetween padding-t-b-20" style="width: 100%;">
								<view>
									<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
										multiple :maxCount="1" width="330rpx" height="200rpx">
										<image src="/static/image/merchantCheck-in/IDFront.png" mode="widthFix"
											style="width: 330rpx;height: 200rpx;"></image>
									</u-upload>
								</view>
								<view>
									<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
										multiple :maxCount="1" width="330rpx" height="200rpx">
										<image src="/static/image/merchantCheck-in/IDReverse.png" mode="widthFix"
											style="width: 330rpx;height: 200rpx;"></image>
									</u-upload>
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="title color-80 fs-30 padding-l-r-30">
						经验信息
					</view>
					<view class="bg-white padding-l-r-30">
						<u-form-item label="店铺名称" prop="store_name" borderBottom ref="item" :required='true'>
							<u--input v-model="model.store_name" border="none" inputAlign='right'
								placeholder='请输入店铺名称'></u--input>
						</u-form-item>
						<u-form-item label="主营类目 " prop="store_cate" borderBottom ref="item" :required='true'
							@click="categoriesShow = true">
							<u--input v-model="model.store_cate" border="none" inputAlign='right' disabled
								placeholder='请选择主营类目'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="营业执照" prop="business_license" ref="item" :required='true' labelPosition='top'>
							<view class="justifyContent-spaceBetween padding-t-b-20" style="width: 100%;">
								<view>
									<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3"
										multiple :maxCount="1" width="330rpx" height="200rpx">
										<image src="/static/image/merchantCheck-in/IDFront.png" mode="widthFix"
											style="width: 330rpx;height: 200rpx;"></image>
										<view style="text-align: center;" class="margin-t-10 fs-26 color-333">营业执照
										</view>
									</u-upload>
								</view>

							</view>
						</u-form-item>
					</view>
				</u--form>
			</view>
			<view class="btn-box bg-white padding-l-r-30">
				<view class="align-items-center fs-24 color-999 agree-box">
					<view class="align-items-center" >
                        <u-checkbox-group @change="checkboxChange" v-model="value" shape="circle" activeColor="#43ABC4" >
                            <u-checkbox style="transform:scale(0.7)"  value="12" shape="circle"  ></u-checkbox>
                        </u-checkbox-group>
                        已阅读并同意
					</view>
					<text class="color-43">《入驻协议》</text>
				</view>
				<view class="btn fs-28 color-white border-radio-14 bg-43" @click="submit">
					提交申请
				</view>
				<view class="flex-1">

				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-action-sheet :show="categoriesShow" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="categoriesShow = false" @select="categoriesSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	import {storeAdd} from '@/api/house.js'
	export default {
		data() {
			return {
				BASE_URL,
				tips: '',
				value: [],
				categoriesShow: false,
				seconds: 10,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'card': {
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					"store_name":{
						type: 'string',
						required: true,
						message: '请填写店铺名称',
						trigger: ['blur', 'change']
					},
					"card_front":{
						type: 'string',
						required: true,
						message: '请上传身份证正面',
						trigger: ['blur', 'change']
					},
					"card_back":{
						type: 'string',
						required: true,
						message: '请上传身份证反面',
						trigger: ['blur', 'change']
					},
					"business_license":{
						type: 'string',
						required: true,
						message: '请上传营业执照',
						trigger: ['blur', 'change']
					},
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				},
				model: {
					name: '',
					card: '',
					mobile: '',
					code: '',
					store_name: '',
					store_cate: ''
				},
				actions: [{
						name: '业务1',
					},
					{
						name: '业务2',
					},
					{
						name: '业务3',
					},
				],
			}
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
            checkboxChange(e){
                console.log(e)
            },
			submit() {
                if(!this.value.length){
                    uni.showToast({
                        title:'请阅读并同意入驻协议',
                        icon:'none'
                    })
                    return
                }
				this.$refs.uForm.validate().then(e => {
                    if (!this.fileList1[0].url){
                        uni.showToast({
                            title:'请上传身份证正面',
                            icon:'none'
                        })
                        return
                    }
                    if (!this.fileList2[0].url){
                        uni.showToast({
                            title:'请上传身份证反面',
                            icon:'none'
                        })
                        return;
                    }
                    if (!this.fileList3[0].url){
                        uni.showToast({
                            title:'请上传营业执照',
                            icon:'none'
                        })
                        return;
                    }
                    this.model.card_front =this.fileList1[0].url
                    this.model.card_back =this.fileList2[0].url
                    this.model.business_license =this.fileList3[0].url
					storeAdd(this.model).then(res=>{
						if(res.code ==1){
							uni.$u.toast('入住申请已提交')
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			categoriesSelect(e) {
                this.model.store_cate = e.name
            },
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $baseUrl.baseUrl + 'api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							'token': uni.getStorageSync('token'),
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							resolve(data.data.fullurl)
						},
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 250rpx;
	}

	.index-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.title {
		line-height: 90rpx;
	}

	.btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 222rpx;
		z-index: 55;
		box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, 0.08);

		.agree-box {
			height: 62rpx;
		}

		.btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
	}
</style>